<template>
	<div class="vr-goods-edit table-theme">
		<head-back-title title="VR商品详情"></head-back-title>
		<el-card>
			<div class="shelf-info" v-if="showView">
				<p class="title">VR信息</p>
				<el-form label-width="120px">
					<el-row :gutter="20">
						<el-col :span="12">
							<el-form-item label="名称:">
								<el-input :disabled="true" v-model="info.vr_name"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="类型:">
								<el-input :disabled="true" v-model="info.space"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="排序:">
								<el-input :disabled="true" v-model="info.sort"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="面积:">
								<el-input :disabled="true" v-model="info.square"><i slot="suffix">m²</i></el-input>
							</el-form-item>
						</el-col>
					</el-row>

					<el-row :gutter="20">
						<el-col :span="12">
							<el-form-item label="备注:">
								<el-input :disabled="true" v-model="info.brief" type="textarea" :rows="3"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="图片:">
								<ImgPopover class="shelf-main-bg" :src="info.image"></ImgPopover>
							</el-form-item>
						</el-col>
					</el-row>
					<el-form-item label="状态:">
						<el-switch :disabled="true" v-model="info.status" :active-value="1" :inactive-value="2"></el-switch>
					</el-form-item>
				</el-form>
			</div>
			<p class="title">VR商品</p>
			<div class="top-menu">
				<div class="menu-left">
					<tabs-view :list="classifyList" :tabsIndex="goods_type" @roleType="roleType"></tabs-view>
				</div>

				<div class="menu-right">
					<refresh-button style="margin-top: -5px;" @refresh="refreshPage"></refresh-button>
					<div class="add">
						<el-button type="primary" size="mini" @click="addGoods(3)">关联商家商品</el-button>
					</div>
					<div class="add">
						<el-button type="primary" size="mini" @click="addGoods(2)">关联全屋套餐</el-button>
					</div>
					<div class="add">
						<el-button type="primary" size="mini" @click="addGoods(1)">关联N98套餐</el-button>
					</div>
					<div class="add">
						<el-button type="primary" size="mini" @click="addGoods(0)">关联平台商品</el-button>
					</div>
				</div>
			</div>
			<el-table :data="goodsList">
				<el-table-column label="VR id" align="center" prop="vr_id"></el-table-column>
				<el-table-column label="序号" align="center" prop="goods_id"></el-table-column>
				<el-table-column label="名称" align="center" prop="goods_name"></el-table-column>
				<el-table-column label="类型" align="center" prop="goods_type_name"></el-table-column>
				<el-table-column label="添加时间" align="center" prop="add_time"></el-table-column>
				<el-table-column label="图片" align="center" width="80">
					<template slot-scope="scope">
						<ImgPopover :src="scope.row.image"></ImgPopover>
					</template>
				</el-table-column>
				<el-table-column label="状态" align="center" prop="">
					<template slot-scope="scope">
						<p v-if="scope.row.is_sale == 1">上架</p>
						<p v-else>下架</p>
					</template>
				</el-table-column>
				<el-table-column label="操作" align="center" width="210">
					<template slot-scope="scope">
						<el-button type="primary" size="mini" @click="edit(scope.row.vr_goods_id, scope.row.goods_type)">编辑</el-button>
						<el-button type="danger" size="mini" @click="delGoods(scope.row.vr_goods_id)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="pages">
				<el-pagination background layout="prev, pager, next, jumper" :total="total" @current-change="init" :current-page="page"></el-pagination>
			</div>
		</el-card>
	</div>
</template>

<script>
	import addVrGoods from '@/components/layer-dialog/add_vr_goods/add-vr-goods.vue';
	import addVrPackage from '@/components/layer-dialog/add_vr_goods/add-vr-package.vue';
	import addVrStoreGoods from '@/components/layer-dialog/add_vr_goods/add-vr-store-goods.vue';
	import ImgPopover from '@/components/ImgPopover';
	import TabsView from '@/components/TabsView'
	export default {
		components: {
			ImgPopover,
			addVrGoods,
			addVrStoreGoods,
			addVrPackage,
			TabsView
		},
		data() {
			return {
				showView: false,
				info: '',
				page: 0,
				total: 0,totalData: 0,  // 数据总数
				goodsList: [],
				goods_type: 0,
				vr_id: '',
				classifyList: ['所有','平台商品','N98套餐','全屋套餐','商家商品']
			};
		},
		methods: {
			init(e) {
				this.vr_id = this.$route.query.vr_id;
				this.page = e;
				let data = {
					page: e - 1 ? e - 1 : 0,
					vr_id: this.vr_id,
					goods_type: this.goods_type - 1
				};
				if (this.goods_type == 0) {
					delete data.goods_type;
				}
				this.$http(this.$ApiList.VrGoodsList, data).then(res => {
					this.goodsList = [];
					res.datas.data.forEach(item => {
						let type_name = ['平台商品', 'N98套餐', '全屋套餐', '商家商品'];
						item.goods_type_name = type_name[item.goods_type];
						this.goodsList.push(item);
					});
					this.total = res.datas.count;
				});
			},
			edit(id, goods_type) {
				this.$prompt('请输入新的ID', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消'
					})
					.then(({
						value
					}) => {
						let data = {
							vr_goods_id: id,
							goods_id: value,
							goods_type: goods_type,
						};
						this.$http(this.$ApiList.VrGoodsEdit, data).then(res => {
							this.$layer.msg(res.datas);
							this.init();
						});
					})
					.catch(() => {
						this.$message({
							type: 'info',
							message: '取消输入'
						});
					});
			},
			// 0 平台商品 1 N98 2 全屋  3 商家商品
			addGoods(type) {
				if (type == 0) {
					this.$layer.iframe({
						title: '选择商品',
						maxmin: true,
						area: ['70%', '60%'],
						content: {
							content: addVrGoods, //传递的组件对象
							parent: this, //当前的vue对象
							data: {
								goods_type: type,
								vr_id: Number(this.vr_id)
							} //props
						}
					});
				} else if (type == 1) {
					this.$layer.iframe({
						title: '选择N98套餐',
						maxmin: true,
						area: ['50%', '60%'],
						content: {
							content: addVrPackage, //传递的组件对象
							parent: this, //当前的vue对象
							data: {
								goods_type: type,
								vr_id: Number(this.vr_id),
								is_house: 1
							} //props
						}
					});
				} else if (type == 2) {
					this.$layer.iframe({
						title: '选择全屋套餐',
						maxmin: true,
						area: ['50%', '60%'],
						content: {
							content: addVrPackage, //传递的组件对象
							parent: this, //当前的vue对象
							data: {
								goods_type: type,
								vr_id: Number(this.vr_id),
								is_house: 2
							} //props
						}
					});
				} else if (type == 3) {
					this.$layer.iframe({
						title: '选择商品',
						maxmin: true,
						area: ['50%', '60%'],
						content: {
							content: addVrStoreGoods, //传递的组件对象
							parent: this, //当前的vue对象
							data: {
								goods_type: type,
								vr_id: Number(this.vr_id)
							} //props
						}
					});
				}
			},
			delGoods(id) {
				this.$confirm('此操作将永久删除, 是否继续?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					})
					.then(() => {
						let data = {
							vr_goods_id: id
						};
						this.$http(this.$ApiList.VrGoodsDel, data).then(res => {
							this.$message({
								type: 'success',
								message: res.datas
							});
							this.init();
						});
					})
					.catch(() => {
						this.$message({
							type: 'info',
							message: '已取消删除'
						});
					});
			},
			roleType(type) {
				this.goods_type = type;
				this.init();
			},
			refreshPage() {
				this.page = 1;
				this.goods_type = 0;
				this.init();
			},
			getInfo() {
				this.$http(this.$ApiList.VrInfo, {
					vr_id: this.vr_id
				}).then(res => {
					this.info = res.datas.list
					this.showView = true;
				});
			}
		},
		created() {
			this.init();
			this.getInfo();
		}
	};
</script>
<style lang="scss">
	.vr-goods-edit {
		.shelf-main-bg img {
			width: 80px !important;
			height: 80px !important;
		}

		.top-menu {
			display: flex;
			margin-bottom: 20px;
		}

		.refresh-btn {
			margin-left: 10px;
		}

		.menu-right {
			flex: 2;
			display: flex;
			flex-direction: row-reverse;
		}

		.top-menu .add {
			margin-left: 10px;
		}

		.menu-left {
			display: flex;
		}

		.type-view {
			display: flex;
		}
		.orderby-view {
			width: 110px;
		}
	}
</style>
